<template>
    <div class="region-white titleBox">
        <span class="fl title-name">{{ titleText }}</span>
        <span v-if="tips" class="tips">{{ tips }}</span>
        <div class="fr">
            <slot></slot>
        </div>
    </div>
</template>

<script>
/**
 * @description 标题组件
 *
 * @description props参数
 * @param {string} title - 标题，不填默认显示页面title
 * @param {string} tips - 标题提示文案
 *
 * @example
 * <view-title title="标题" tips="^~^提示">右侧插槽</view-title>
 */
export default {
    name: "view-title",
    props: {
        title: {
            type: String,
            default: "",
        },
        tips: {
            type: String,
            default: "",
        },
    },
    computed: {
        // 若未设置标题，使用页面title
        titleText() {
            return this.title || this.$route.meta.title;
        },
    },
};
</script>

<style lang="less" scoped>
@import url("~@assets/css/public.less");
.titleBox {
    margin-bottom: 15px;
    padding: 15px;
    .tips {
        margin-left: 15px;
        line-height: 28px;
        font-size: 12px;
        color: @lightGrey;
    }
}
</style>